<!--  单选列表组件使用说明
Attributes
参数                        说明                      类型                    默认值
stoppointObjs            数据源                  Arr+Obj [{},{}]                 -
labelProperty           播放器标签显示的        String/[String,String,..]        -
                        数据所属的字段
intervalTime           播放器播放将时间              Num                         1000

Events
事件名称            说明                  回调参数
stopPointClick     点击播放器按钮触发    当前点击项对应的数据源数组中的对象

Example:<single-list  :dataArr = 'objects' :listTitle="listTitle" :numInLine="lineNum" :labelProp="prop" :defaultSelected="defaultCrop" v-on:itemSelected="cropselected" ></single-list>
-->
<template>
  <div>
    <!--时间滑块-->
    <div  class="timeSliderBoxN" :style="mainSliderWidth">
      <div  :style="mainSliderWidth" class = "mainSliderN">
        <div :style="sliderColorStyle" class="sliderColorN"></div><!--高亮颜色覆盖条-->
        <div :style="markPointStyle" class="markPointN"><div class="pointLabelN" ></div></div><!--当前高亮点-->
        <div v-for="(stoppoint,index) in stoppointObjssss" class="sliderPointBoxN" :style="computeLeftNum(stoppointObjs.length,index)">
          <div class="datesliderN" :style="stoppointlabel(index)">{{showLabel(stoppoint)}}</div><!--间隔点的标签-->
          <div class="sliderPointN" @mouseout="stoppointmouseout(index)"  @mouseover="stoppointmouseover(index)"  @click="stoppointclick(stoppointObjs.length,index)" ></div><!--间隔点-->
          <div class="middleIntervalN" @click="stoppointclick(stoppointObjs.length,index+1)" v-if="stoppointObjs.length-1 != index" :style="intervalDivWidth(stoppointObjs.length,index)"></div><!--间隔点之间的间隔线-->
        </div>
      </div>
    </div>
    <!--播放器-->
    <div id = "playerBox" :style="playBoxWidth" class="playboxStyleN" >
      <div style="text-align: center;-webkit-user-select: none; -moz-user-select: none;-ms-user-select: none;user-select: none;">
      <div class="preN playBtnN "   @click="preBtnClick()" ></div><!--播放按钮左键-->
        <div :class='{playBtnN:isPlayBtnN,playN:isPlayN,pauseN:isPauseN}'  @click="playBtnClick()"><!--播放按钮播放键-->
      </div><div class="nextN playBtnN" @click="nextBtnClick()"></div><!--播放按钮右键-->
      </div>
    </div>
  </div>
</template>
<script>
    export default {
      name: "time-sliderN",
      props:["stoppointObjs","labelProperty","intervalTime"],
      computed:{
        stoppointObjssss:function () {
          this.resetPlayBox();
          return this.stoppointObjs;
        },
        playBoxWidth:function () {//播放器宽度的计算属性
          let playbox_Width = "360px";//播放器默认长度320px;
          if(this.stoppointObjs.length <= 4){//如果数据长度小于四则播放器长度为210px
            playbox_Width = "270px";
          }
          return{
            width:playbox_Width,
          }
        },
        mainSliderWidth:function(){//主slider宽度的计算属性
          let sliderWidht = "300px";//播放器默认长度400px;
          if(this.stoppointObjs.length <= 4){//如果数据长度小于四则播放器长度为210px
              sliderWidht = "210px";
          }
          return{
            width:sliderWidht,
          }
        },
      },
      data(){
        return {
          isPlayBtnN:true,//播放按钮基本类
          isPlayN:true,//播放按钮暂停类
          isPauseN:false,//播放按钮播放类
         sliderColorStyle:{//覆盖主slider的高亮颜色层样式
             width:'0%'
          },
          markPointStyle:{//滑块上当前点的样式
            left:'0%'
          },
         curInterval:"",//定义循环函数的名字
         curentLabelIndex:0,//时间轴上当前显示label的stop点的索引，默认第一张label显示，所以默认值是0
         temporaryLabelIndex:-1,//鼠标悬浮的stop节点的索引
         playBtnStatus:false,//播放器播放按钮的状态
        }
      },
      methods:{
        /**
         * 重置播放器数据
         */
        resetPlayBox:function () {
          this.isPlayBtnN=true,//播放按钮基本类
            this.isPlayN=true,//播放按钮暂停类
            this.isPauseN=false,//播放按钮播放类
            this.sliderColorStyle={//覆盖主slider的高亮颜色层样式
              width:'0%'
            };
          this.markPointStyle={//滑块上当前点的样式
            left:'0%'
          };
          this.curInterval="";//定义循环函数的名字
          this.curentLabelIndex=0;//时间轴上当前显示label的stop点的索引，默认第一张label显示，所以默认值是0
          this.temporaryLabelIndex=-1;//鼠标悬浮的stop节点的索引
          this.playBtnStatus=false;//播放器播放按钮的状态
        },
        showLabel:function (stoppoint) {
          let labelProps = this.labelProperty;//获取用户传入的lebel中要显示的字段名字
          let labelContent = "";
          if(labelProps){
            if((typeof labelProps=='object')&&labelProps.constructor==Array){//如果显示的字段传入数组
              labelProps.forEach(function (labelProp) {
                labelContent += stoppoint[labelProp] || "";
              });
            }
            if((typeof labelProps=='string')&&labelProps.constructor==String){//如果显示的字段传入字符串
              labelContent = stoppoint[labelProps] || "";
            }
          }
          return labelContent
        },
        preBtnClick:function () {//播放器按钮左键点击响应函数
          this.stopPlay();
          if(this.stoppointObjs.length < 2){/*数据小于两个没必要播放*/
            return
          }
          if(this.curentLabelIndex === 0 ){
            this.stoppointclick(this.stoppointObjs.length,this.stoppointObjs.length -1);
            return
          }
          this.stoppointclick(this.stoppointObjs.length,(this.curentLabelIndex-1));
        },
        nextBtnClick:function (owner) {//播放器按钮右键点击响应函数
          if(owner != "auto"){//如果不是自动执行（即播放按钮触发的该事件），则先执行停止播放函数
            this.stopPlay();
          }
          if(this.stoppointObjs.length < 2){/*数据小于两个没必要播放*/
            return
          }
          if(this.stoppointObjs.length === (this.curentLabelIndex+1)){
            this.stoppointclick(this.stoppointObjs.length,0);
            return
          }
          this.stoppointclick(this.stoppointObjs.length,(this.curentLabelIndex+1));
        },
        stopPlay:function () {//播放器停止播放函数
          let that = this;
          if(this.playBtnStatus){//如果正在播放
            this.isPlayN=true;//播放按钮变为暂停状态
            this.isPauseN=false;//播放按钮变为暂停状态
            if(that.curInterval){
              clearInterval(that.curInterval);//停止播放
            }
            this.playBtnStatus = !this.playBtnStatus;//改变播放按钮状态
          }
        },
        playBtnClick:function () {//播放器按钮播放键点击响应函数
          let that = this;
          if(this.stoppointObjs.length < 2){/*数据小于两个没必要播放*/
            return
          }
          if(!this.playBtnStatus){
            this.isPlayN=false;//播放按钮变为播放状态
            this.isPauseN=true;//播放按钮变为播放状态
            this.curInterval = setInterval(function(){//启动播放
              that.nextBtnClick("auto");
            }, (that.intervalTime || 1000));//如未指定播放间隔时间，默认1000ms
          }else{
            this.isPlayN=true;//播放按钮变为暂停状态
            this.isPauseN=false;//播放按钮变为暂停状态
            if(that.curInterval){
              clearInterval(that.curInterval);//停止播放
            }
          }
          this.playBtnStatus = !this.playBtnStatus;//改变播放按钮状态
        },
        stoppointclick:function (length,index) {//时间轴stop点的点击事件
            this.sliderColorStyle.width = this.computeLeftNum(length,index).left;
            this.markPointStyle.left = this.computeLeftNum(length,index).left;
            this.curentLabelIndex =index;
            this.$emit('stopPointClick',this.stoppointObjs[index]);/*触发stop点击的回调函数,将传入数组的对应索引的对象返回*/
        },
        stoppointlabel:function (index) {
          if(index === this.temporaryLabelIndex || index === this.curentLabelIndex ){//如果是当前stop点或者是鼠标悬浮的点则显示label
            return {"display":"block"}
          }
          return {"display":"none"}
        },
        stoppointmouseout:function () {
          this.temporaryLabelIndex = -1;
        },
        stoppointmouseover:function (index) {//时间轴stopd点的鼠标悬浮事件，改变当前临时显示label的stop点的索引
          this.temporaryLabelIndex = index;
        },
        intervalDivWidth:function (length,index) {
          let result = (400/(length-1)).toString() + "px";
          return {width:result};
        },
        computeLeftNum:function (len,index) {//计算时间滑块上每个stop点的left样式的值，用于定位每个stop点
          if(index === 0){
            return {left:"0%"}
          }
          let leftNum = (100/(len-1))*index.toString() + '%';
          return {left:leftNum}
        },
      }
    }
</script>
<style scoped >
  .datesliderN{
    position: relative;
    bottom: 20px;
    display: none;
    width: 150px;
  }
  .mainSliderN{/*slider底色基础样式  */
    height: 3px;
    background-color: #e4e7ed;
    border-radius:4px;
    position: relative;
  }
  .timeSliderBoxN{
    font-size:12px;
    background-color:rgba(0,0,0,0.7);
    margin-top:10px;
    padding: 30px 30px 12px 30px;
    color:#fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .sliderPointBoxN{/* 各个时间点的标记容器样式 */
    position: absolute;
    width: 14px;
    height: 8px;
  }
  .markPointN{
    position: absolute;
    width:20px;
    height:13px;
  }
  .sliderColorN{
    height: 3px;
    background-color:#409eff;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    position: absolute;
    width:0%
  }
  .sliderPointN{/* slider标记圆点样式 */
    border-radius:50%;
    width:8px;
    height: 8px;
    border:2px solid red;
    background-color: #fff;
    position: absolute;
    left: -8px;
    bottom: 0px;
    z-index: 20;
  }
  .pointLabelN{/*时间滑块当前点的标签的样式*/
    z-index:100;
    width: 8px;
    height: 8px;
    border:2px solid #409eff;
    background-color:#fff;
    border-radius:50%;
    position:absolute;
    bottom: 5px;
    left: -8px;
  }
  .middleIntervalN{
    position: absolute;
    background-color: transparent;
    height: 3px;
  }
  .playBtnN{/* 播放按钮基础样式 */
    display: inline-block;
    width:30px;
    height:30px;
    cursor: pointer;
    margin-right: 20px;
  }
  .playboxStyleN{
    background-color: rgba(0,0,0,0.7);
    color: #ffffff;
    padding:0 0 10px 0;
  }
  .preN{
    background: url(../../static/img/pre.png) no-repeat;
  }
  .pauseN{
    background: url(../../static/img/paush.png) no-repeat;
  }
  .playN{
    background: url(../../static/img/play.png) no-repeat;
  }
  .nextN{
    background: url(../../static/img/next.png) no-repeat;
  }
</style>
